<template>
  <div class="layout-page bg-#f8f9fe pt-32px">
    <div class="layout-page-inner box-border bg-#fff w-1328px py-70px">
      <h3 class="font-size-24px fw-500 text-center mb-57px">申请供应信息</h3>
      <el-form
          class="apply-form w-60% mx-auto"
          ref="applyForm"
          :model="formData"
          :rules="rules"
          label-position="right"
          :label-width="130"
      >
        <el-form-item label="联系人" prop="contactUser">
          <div class="flex w-full items-center">
            <el-input
                v-model="formData.contactUser"
                placeholder="请输入联系人"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="联系电话" prop="contactUserMobile">
          <div class="flex w-full items-center">
            <el-input
                v-model="formData.contactUserMobile"
                placeholder="请输入联系电话"
                :maxlength="11"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item label="申请说明" prop="supplyDesc">
          <el-input
              type="textarea"
              v-model="formData.supplyDesc"
              placeholder="请输入, 最多不超过200字"
              :autosize="{ minRows: 4 }"
              :maxlength="200"
          ></el-input>
        </el-form-item>
        <el-form-item label="申请时间" prop="applyTime">
          <el-date-picker
              style="width: 60%"
              type="daterange"
              v-model="formData.applyTime"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD HH:mm:ss"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
              type="primary"
              class="mt-36px h-48px w-108px b-rd-0"
              :loading="confirmLoading"
              @click="handleSubmit"
          >确认提交</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { useLoading } from "@/hooks";
import { getDateStr } from "@/utils";
import { useUserStore } from "@/store";

const route = useRoute();
const applyForm = ref();
const userStore = useUserStore();
const formData = ref({
  supplyId: route.query.id,
  supplyTime: getDateStr(new Date(), "dateTime"),
  contactUser: userStore.userInfo?.nickName,
  contactUserMobile: userStore.userInfo?.phonenumber,
  supplyDesc: "",
  applyTime: null,
});
const rules = reactive({
  supplyDesc: [{ required: true, message: "请填写申请说明" }],
  applyTime: [{ required: true, type: "array", message: "请选择申请时间" }],
  contactUser: [{ required: true, message: "请输入联系人" }],
  contactUserMobile: [{ required: true, message: "请输入联系电话" }],
});

const supplyInfo = ref(null);
const getSupplyInfo = () => {
  const infoJson = sessionStorage.getItem("applySupplyInfo");
  if (!infoJson) return;
  supplyInfo.value = JSON.parse(infoJson);
};

onMounted(() => {
  getSupplyInfo();
});

const { loading: confirmLoading, setLoading } = useLoading();
const $api = inject("$api");
const router = useRouter();
const handleSubmit = async () => {
  applyForm.value.validate(async (valid) => {
    if (!valid) return;
    setLoading(true);
    try {
      await $api.supply.applySupply({
        ...formData.value,
        supplyTime: formData.value.applyTime[0],
        orderLastTime: formData.value.applyTime[1],
      });
      ElMessage.success("申请成功");
      if (supplyInfo.value) {
        const { contactUser, contactUserMobile } = supplyInfo.value;
        await ElMessageBox.alert(
            `联系人：${contactUser}<br />联系方式：${contactUserMobile}`,
            "供应商信息",
            {
              showClose: false,
              dangerouslyUseHTMLString: true,
              confirmButtonText: "关闭",
              showCancelButton: false,
            }
        );
        router.push("/userCenter");
      } else {
        setTimeout(() => {
          router.push("/userCenter");
        }, 1000);
      }
    } catch (e) {
      setLoading(false);
    }
  });
};
</script>

<style lang="less" scoped>
:deep .el-message-box__message {
  white-space: pre-wrap;
}
</style>